<template>
  <!-- <div class="py-2"> -->
  <div class="cover-list neu-card px-5">
    <div class="cover-title">
      <el-tabs
        v-model="activeIndex"
        @tab-click="handleSelect"
        class="title-tabs"
        v-if="props.titleTpype === 'list'"
      >
        <el-tab-pane v-for="title,index in props.titleList" :label="title" :name="index + ''">
          <slot :name="title"></slot>
        </el-tab-pane>
      </el-tabs>
      <!-- <el-menu
          v-if="titleTpype==='list'"
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item v-for="title,index in titleList" :index="index">{{title}}</el-menu-item>
      </el-menu>-->
      <div class="title-list">
        <slot name="title"></slot>
      </div>
    </div>
    <slot></slot>
    <slot name="content"></slot>
  </div>
  <!-- </div> -->
</template>
<script setup>
import { ref } from 'vue'

const activeIndex = ref('0')

const props = defineProps({
  titleList: Array,
  titleTpype: {
    default: 'list',//'slot',
    type: String
  },
  defaultHeader: {
    default: '58px',
    type: String
  }
})
const defaultHeightHeader = props.defaultHeader
const emit = defineEmits(['changeTitle'])
const handleSelect = (tab, event) => {
  emit('changeTitle', Number(tab.paneName), event)
}
const handleInit = (tab, event) => {
  activeIndex.value = tab.paneName
  emit('changeTitle', Number(tab.paneName), event)
}
defineExpose({ handleInit })
</script>
<style lang="scss" scoped>
.cover-list {
  .cover-title {
    position: relative;
    .title-list {
      position: absolute;
      right: 0;
      top: 0;
      height: v-bind(defaultHeightHeader);
      line-height: v-bind(defaultHeightHeader);
    }
  }
  .cover-content {
    height: 100%;
  }
  .title-tabs {
    :deep(.el-tabs__header) {
      height: v-bind(defaultHeightHeader);
      .el-tabs__nav-wrap,
      .el-tabs__nav-scroll,
      .el-tabs__nav,
      .el-tabs__item {
        height: 100%;
      }
    }
    :deep(.el-tabs__item) {
      line-height: v-bind(defaultHeightHeader);
      font-size: 16px;
      font-weight: 600;
      &:not(.is-active) {
        color: #444;
      }
    }
    :deep(.el-tabs__active-bar) {
      background-color: #f2b72f;
      height: 4px;
    }
  }
}
</style>